<template>
  <div class="home">
    <ImageNav />
    <div>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabsEdit">
        <el-tab-pane name="1" label="废旧物资">
          <span slot="label" class="tab-pane_label">废旧物资</span>
          <!-- 详细信息块 -->
          <div id="infoBlock">
            <el-row>
              <el-col class="infoBlockCol" :span="6" v-for="(item, i) in this.BiddingNoticeList" :key="i">
                <el-card class="box-card" shadow="hover" @click.native="clickBiddingView(item)" :body-style="{ padding: '0px' }">
                  <div class="image-contain">
                    <el-image :src="item.F_PKTL_ImageFileServer" style="width: 100%; height: 100%">
                      <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                    </el-image>
                  </div>

                  <el-descriptions class="card-description" :column="1" size="mini">
                    <template slot="title">
                      <div class="title-content">{{ item.F_PKTL_ProjectName }}</div>
                    </template>
                    <el-descriptions-item label="竞价模式">{{ getBiddingModeName(item.F_PKTL_BiddingMode, 'F_PKTL_BiddingMode') }}</el-descriptions-item>
                    <el-descriptions-item label="竞价时间">{{ getFormatDate(item.F_PKTL_BeginDatetime) }}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="2" label="二手设备">
          <span slot="label" class="tab-pane_label">二手设备</span>
          <div id="infoBlock">
            <el-row>
              <el-col class="infoBlockCol" :span="6" v-for="(item, i) in this.BiddingNoticeList" :key="i">
                <el-card class="box-card" shadow="hover" @click.native="clickBiddingView(item)" :body-style="{ padding: '0px' }">
                  <div class="image-contain">
                    <el-image :src="item.F_PKTL_ImageFileServer" style="width: 100%; height: 100%">
                      <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                    </el-image>
                  </div>

                  <el-descriptions class="card-description" :column="1" size="mini">
                    <template slot="title">
                      <div class="title-content">{{ item.F_PKTL_ProjectName }}</div>
                    </template>
                    <el-descriptions-item label="竞价模式">{{ getBiddingModeName(item.F_PKTL_BiddingMode, 'F_PKTL_BiddingMode') }}</el-descriptions-item>
                    <el-descriptions-item label="竞价时间">{{ getFormatDate(item.F_PKTL_BeginDatetime) }}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="3" label="备品备件">
          <span slot="label" class="tab-pane_label">备品备件</span>
          <div id="infoBlock">
            <el-row>
              <el-col class="infoBlockCol" :span="6" v-for="(item, i) in this.BiddingNoticeList" :key="i">
                <el-card class="box-card" shadow="hover" @click.native="clickBiddingView(item)" :body-style="{ padding: '0px' }">
                  <div class="image-contain">
                    <el-image :src="item.F_PKTL_ImageFileServer" style="width: 100%; height: 100%">
                      <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                    </el-image>
                  </div>

                  <el-descriptions class="card-description" :column="1" size="mini">
                    <template slot="title">
                      <div class="title-content">{{ item.F_PKTL_ProjectName }}</div>
                    </template>
                    <el-descriptions-item label="竞价模式">{{ getBiddingModeName(item.F_PKTL_BiddingMode, 'F_PKTL_BiddingMode') }}</el-descriptions-item>
                    <el-descriptions-item label="竞价时间">{{ getFormatDate(item.F_PKTL_BeginDatetime) }}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane name="4" label="厂房产线">
          <span slot="label" class="tab-pane_label">厂房产线</span>
          <div id="infoBlock">
            <el-row>
              <el-col class="infoBlockCol" :span="6" v-for="(item, i) in this.BiddingNoticeList" :key="i">
                <el-card class="box-card" shadow="hover" @click.native="clickBiddingView(item)" :body-style="{ padding: '0px' }">
                  <div class="image-contain">
                    <el-image :src="item.F_PKTL_ImageFileServer" style="width: 100%; height: 100%">
                      <div slot="placeholder" class="image-slot">加载中<span class="dot">...</span></div>
                    </el-image>
                  </div>

                  <el-descriptions class="card-description" :column="1" size="mini">
                    <template slot="title">
                      <div class="title-content">{{ item.F_PKTL_ProjectName }}</div>
                    </template>
                    <el-descriptions-item label="竞价模式">{{ getBiddingModeName(item.F_PKTL_BiddingMode, 'F_PKTL_BiddingMode') }}</el-descriptions-item>
                    <el-descriptions-item label="竞价时间">{{ getFormatDate(item.F_PKTL_BeginDatetime) }}</el-descriptions-item>
                  </el-descriptions>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import ImageNav from '@/components/ImageNav.vue'

export default {
  name: 'homeView',
  components: {
    // HelloWorld,
    ImageNav,
  },
  data() {
    return {
      // 元数据
      businessInfo: '',
      // 数据列表
      BiddingNoticeList: [],
      // BiddingNoticeList:[{F_PKTL_ProjectName:"项目1",F_PKTL_BiddingMode:"公开竞价",F_PKTL_BeginDatetime:"2023-01-11 12:5:00"},
      // {F_PKTL_ProjectName:"项目2",F_PKTL_BiddingMode:"公开竞价",F_PKTL_BeginDatetime:"2023-01-11 12:5:00"}],
      serviceagreeement: '',
      // 初始化标签页的页码
      activeName: '1',
      // 金蝶查询参数
      params: {},
      // 金蝶查询属性数组
      fieldKeys: [
        'FBillNo',
        'F_PKTL_Date',
        'F_PKTL_ProjectName',
        'F_PKTL_MaterialType',
        'F_PKTL_BeginDatetime',
        'F_PKTL_EndDatetime',
        'F_PKTL_BiddingMode',
        'F_PKTL_MaterialName',
        'F_PKTL_GoodMaterial',
        'F_PKTL_ImageFileServer',
        'F_PKTL_ServiceAgreement',
      ],
      // fieldKeys:["FBillNo","F_PKTL_Date","F_PKTL_ProjectName","F_PKTL_MaterialType","F_PKTL_BeginDatetime","F_PKTL_EndDatetime","F_PKTL_MaterialName","F_PKTL_GoodMaterial"]
    }
  },
  created() {
    this.getSession()
  },

  methods: {
    async getSession(){
      await this.$loginByAppSecret()
      this.buildParams()
      await this.loadBusinessInfo()
      this.loadBiddingNotice(this.params)
    },
    // 初始化金蝶需要的参数
    buildParams() {
      this.params = {}
      this.params.FormId = 'PKTL_BiddingNotice'
      this.params.FieldKeys = this.fieldKeys.toString()
      ;(this.params.StartRow = 0), (this.params.Limit = 8), (this.params.OrderString = 'FId desc')
      this.params.FilterString = [
          {"Left":"(","FieldName":"F_PKTL_MaterialType","Compare":"=","Value":1,"Right":")","Logic":"AND"},
          {"Left":"(","FieldName":"F_PKTL_BidStatus","Compare":"StatusUnequalto","Value":0,"Right":")","Logic":"AND"},
        ]
    },
    // 金蝶元数据查询方法 ///在元数据没有加载完成，但是数据集合加载完成，页面开始渲染，需要执行元数据的方法会因为找不到元数据的内容进行报错
    async loadBusinessInfo() {
      await this.$api.billBusinessInfo.queryBusinessInfo('PKTL_BiddingNotice').then((res) => {
        this.businessInfo = res
        console.log(res, '返回的金蝶元数据')
      })
    },
    // 金蝶数据集合查询方法
    loadBiddingNotice(params) {
      let data = { data: params }
      this.$api.biddingNotice.executeBillQuery(data).then((res) => {
        let notictList = []
        res.forEach((item, i) => {
          let obj = Object.create(null)
          this.fieldKeys.forEach((fieldKey, i) => {
            if (fieldKey == 'F_PKTL_ImageFileServer') {
              obj[fieldKey] = this.$_global.srcURL + item[i] + '&dbId=' + this.$_global.dbId
            } else {
              obj[fieldKey] = item[i]
            }
          })
          notictList.push(obj)
        })
        console.log(notictList)
        this.BiddingNoticeList = notictList
        console.log(this.BiddingNoticeList)
        // var str=Base64.decode(res[0][8])
        // this.serviceagreeement=str
        // console.log(str)
      })
    },
    // 点击跳转详情页
    clickBiddingView(item) {
      console.log('跳转到详情页')
      this.$router.push({ name: 'tenderView', query: { billNo: item.FBillNo } })
    },
    // 标签页头调用的方法
    handleSelect(key, keyPath) {
      console.log(key + 'select', keyPath + 'select')
    },
    // 标签页处理方法
    handleTabsEdit(tab) {
      this.params.FilterString = [{ Left: '(', FieldName: 'F_PKTL_MaterialType', Compare: '=', Value: tab.name, Right: ')', Logic: 'AND' }]
      this.loadBiddingNotice(this.params)
    },
    getBiddingModeName(fieldValue, fieldKey) {
      // console.log(fieldValue)
      return this.Common.getFieldValue(fieldValue, fieldKey, this.businessInfo)
    },
    getFormatDate(item) {
      return this.Common.dateFormat(item, 'yyyy-MM-dd HH:mm')
    },
    // 初始化调用的方法
  },
}
</script>
<style scoped>
.home {
  width: 80%;
  margin: auto;
}
/* 卡片样式 */
.box-card {
  margin: 5px;
  padding: 0px;
}
#infoBlock {
  height: 950px;
}
.tab-pane_label {
  font-size: 18px;
  font-weight: 900;
}
.image-contain {
  width: 359px;
  height: 350px;
}
.title-content {
  text-align: left;
  width: 350px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.infoBlockCol {
  height: 480px;
}
.card-description {
  height: 100px;
  margin: 10px;
}
</style>
